<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as mapvthree from "mapv-three";

const center = [116.39151, 39.89329];
// 初始化百度地图（需要引入地图jsapi）
console.log(BMapGL);
const dom = ref();

onMounted(() => {
  const map = new BMapGL.Map(dom.value);

  map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
  map.enableScrollWheelZoom();

  // 初始化 mapvthree 引擎(第一个参数为地图实例或DOM)
  const engine = new mapvthree.Engine(map, {
    rendering: {
      enableAnimationLoop: true,
    },
  });
  engine.map.setCenter(center);
  engine.map.setPitch(60);

  // 添加天空(提供光照)
  const sky = engine.add(new mapvthree.EmptySky());
  sky.time = 3600 * 14;

  // 添加其他
  const pillar = engine.add(
    new mapvthree.Pillar({
      height: 300,
      radius: 50,
      radialSegments: 32,
    })
  );
});
</script>

<template>
  <div ref="dom" id="container"></div>
</template>

<style lang="scss">
#container {
  width: 100%;
  height: 700px;
}
</style>
